<template>
  <el-container style="height: 100%">
    <el-aside width="auto">
      <Leftnav></Leftnav>
    </el-aside>

    <el-container>
      <el-header style="height:auto;padding: 0">
        <Headnav></Headnav>
      </el-header>
      <div class="content-box" :class="{ 'content-collapse': collapse }">
        <!-- <div v-if="this.$store.state.themeHref.indexOf('global')>=0">
          <Tag></Tag>
        </div> -->
        <div class="Breadcrumbback">
          <Breadcrumb></Breadcrumb>
        </div>
        <el-main class="jiansezhu" style="padding:0;overflow: hidden;">
            <keep-alive :include="tagsList">
              <router-view v-if="isRouterAlive"></router-view>
            </keep-alive>
        </el-main>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import Headnav from "@/components/component/Headnav"; //组件
import Tag from "@/components/component/Tags";
import Breadcrumb from "@/components/component/Breadcrumb";
import bus from "@/common/eventbus.js";
import Leftnav from "@/components/component/Leftnav"; //组件
import "../../static/css/dome.css";
import "../../static/css/style.css";

export default {
  name: "Home",
  provide () {  //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
      return {
          reload: this.reload                                              
      }
  },
  data() {
    return {
      tagsList: [],
      collapse: false,
      isRouterAlive: true,//控制视图是否显示的变量
    };
  },
  methods: {
      reload () {
          this.isRouterAlive = false;            //先关闭，
          this.$nextTick(function () {
              this.isRouterAlive = true;         //再打开
          }) 
      }
  },
  components: {
    Headnav,
    Leftnav,
    Tag,
    Breadcrumb,
  },
  created() {
    bus.$on("collapse-content", (msg) => {
      this.collapse = msg;
    });

    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on("tags", (msg) => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });

    

    // if (sessionStorage.getItem("theme")) {
    //   console.log("读取sessionstorage前的数据")
    //   console.log(this.$store.state,JSON.parse(sessionStorage.getItem("theme")))
 
    //   // this.$store.state.theme = JSON.parse(sessionStorage.getItem("theme"))
    //   this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("theme"),sessionStorage.getItem("language"))))
 
    //   console.log("读取sessionstorage后的数据")
    //   console.log(this.$store.state,JSON.parse(sessionStorage.getItem("theme")))
    // }
  },
  
  mounted(){
    if(!document.getElementById('theme')){
      let link = document.createElement('link');
      link.type = 'text/css';
      link.id = "theme";
      link.rel = 'stylesheet';
      link.href = this.$store.state.themeHref;
      document.getElementsByTagName("head")[0].appendChild(link);
    }else{
      document.getElementById('theme').href = this.$store.state.themeHref;
    }
  },
  
};
</script>
<style lang="less" scoped>
.content-box {
  width: auto;
  height: 100%;
  // background-color: #121A32;
  // color: #333;
  overflow: auto;
}

//页面右侧滑块
.content-box::-webkit-scrollbar {
  width: 6px;
}
.content-box::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(255, 249, 244, 0.1);
}
.content-box::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: gray;
}
</style>

